// 这个js就是  请求的二次封装  在这里我要怎么封装呢  
// 1 使用axios 这个请求模块  在该模块下进行公共部分的封装
//   请求前 查看本地储存有没有token  如果有则携带在请求头内
//   响应后 查看响应头内有没有token 如果有则保存在本地
import axios from 'axios'
import router from '../router/index'
import utils from './storage.js'
// import store from '@/store'
// const http = 创建一个请求对象
const http = axios.create({
    timeout: 2000,
    baseURL: '/api',//在所有通过http这个对象请求的url路径前面都拼接一个/api
    headers: {
        "Content-Type": "application/json;charset=utf-8"
    }
})
// 请求拦截器
http.interceptors.request.use(req => {
    // 这里是请求拦截器  有点类似于3阶段jq ajax的 beforeSend
    let token = sessionStorage.getItem('token')
    // console.log(token, 'bendi')
    // 在本地找到了token 将token携带进请求 保存在请求头内
    utils.getStorage('token') && (req.headers.authorization = `Bearer ${token}`)
    // console.log(req.headers.authorization)
    return req
})
// 响应拦截器
http.interceptors.response.use(resp => {
    // 如果resp.headers.Authorization有值就执行setStorage('token', resp.headers.Authorization)
    // resp.headers.authorization && utils.setStorage('token', resp.headers.authorization)
    if (resp.headers.authorization) {
        utils.setStorage('token', resp.headers.authorization)
        console.log(store, '响应拦截')
        store.commit('setToken', resp.headers.authorization)
    }
    //不仅仅要讲token保存在本地  还要将token保存在vuex
    // return 的意思 放开这次拦截 并将响应对象返回给用户
    return resp
}, error => {
    // 响应报错的时候要干的事情
    let _resp = error.response
    switch (_resp.status) {
        case 401:
            alert('你的身份已经过期,请重新登录')
            // 清空本地储存的东西
            utils.removeStorage('user')
            // utils.removeStorage('token')
            // 跳转到登录页面
            router.push('/login')
            break;
        case 500:
            alert('服务器报错')
            break;
        case 404:
            alert('请求未找到')
            break
    }
    // 将服务器报错信息返回给用户
    return Promise.reject(error.response.data)
})
// 当整体封装完后 将封装号的请求对象注入 vue方法库


export default http